<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="楼栋">
        <el-select @change="buildingChange" v-model="listQuery.parm2" clearable filterable class="filter-item"
          placeholder="请选择楼栋">
          <el-option v-for="item in fpointOptions2" :key="item.fpointNo" :label="item.fpointName"
            :value="item.fpointNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层">
        <el-select v-model="listQuery.parm3" clearable filterable class="filter-item" placeholder="请选择楼层">
          <el-option v-for="item in layerList" :key="item.flayerNo" :label="item.flayerName" :value="item.flayerNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="预约人员">
        <div style="display:flex;justify-content:flex-start;align-items:center">
          <el-select style="display: inline-block" clearable filterable v-model="listQuery.parm4" class="filter-item"
            placeholder="请选择预约人员">
            <el-option v-for="item in getListSpeakerId" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <i class="el-icon-search selectI" @click="searchDialoguse('search')" />
        </div>
      </el-form-item>
    </el-form>
    <div class="app-containermain">
      <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
        <span style="margin-right:150px">
          <span style="cursor:pointer" @click="last">上周</span>
          <span style="cursor:pointer;margin: 0 10px;" @click="current">本周</span>
          <span style="cursor:pointer" @click="next">下周</span></span>
        <el-button @click="updatelist" round size="medium" class="filter-item"
          style="color: white;background: #3daaf7;">刷新</el-button>
      </div>
      <div class="roomdatecss">
        <span>楼栋</span>
        <span>楼层</span>
        <span>会议室</span>
        <span v-for="(item, index) in monthList" :key="'monthList' + index">{{ item.month }}
          <span style="width:90px;display: block;font-size: 14px;text-align: center;margin: 0 auto;">({{ item.week
          }})</span>
        </span>
      </div>
      <div class="roomdatecssconnect" v-for="(item, index) in roomdates" :key="'roomdate' + index">
        <div class="spanroom">{{ item.flabName }}</div>
        <div class="spanroom">{{ item.flayerName }}</div>
        <div class="spanroom">{{ item.fpointName }}</div>
        <div class="spanroom">{{ item.fday1 }}</div>
        <div class="spanroom">{{ item.fday2 }}</div>
        <div class="spanroom">{{ item.fday3 }}</div>
        <div class="spanroom">{{ item.fday4 }}</div>
        <div class="spanroom">{{ item.fday5 }}</div>
        <div class="spanroom">{{ item.fday6 }}</div>
        <div class="spanroom">{{ item.fday7 }}</div>
      </div>
    </div>

    <userDialog :searchVisibleuse.sync="searchVisibleuse" :fsiteNo.sync="userDialogFsiteNo" :tableColor="tableColor"
      @userDialog="userDialogValue" />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}

.app-containermain {
  width: 1260px;
  display: block;
  margin: 0 auto;

}

.roomdatecss {
  border: 1px solid #c7c7c7;
  /* display: flex;
  justify-content: space-between */
}

.roomdatecss span {
  width: 124px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  display: inline-table;
  background: white;
  color: black;
  border: 1px solid white;
}

.roomdatecssconnect {
  display: flex;
}

/* .roomdatecssconnect span {
  width: 126px;
  text-align: center;
  display: table-cell;
  color: white;
  background: #3daaf7;
  box-sizing: border-box;
} */

.roomdatecssconnectspan {
  display: inline-block;
  height: 200px;
  border: 1px solid #c7c7c7;
}

.spanroom {
  width: 126px;
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  color: white;
  background: #3daaf7;
  box-sizing: border-box;
  height: 200px;
  border: 1px solid #c7c7c7;
  overflow: auto;
}
</style>

<script>
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, titleColor, buttonColor } from "@/filters/index";
import { MeetingOneWeek, meetingWeek } from "@/api/meetingManage";
import { listPointByFsiteNo2 } from '@/api/airAlarm'
import { listtsLayer } from '@/api/tsLayer'
import { getListArea } from "@/api/area";
import UserDialog from '@/components/UserDialog'

export default {
  name: "Calendar",
  components: { Pagination, UserDialog },
  data() {
    return {
      lastFlag: 1,
      nextFlag: 1,
      userFlag: null, // 判断人员是搜索还是添加
      searchVisibleuse: false, // 是否显示人员弹窗
      userDialogFsiteNo: null, // 客户编号(人员弹出框)
      getListSpeakerId: [], // 人员
      monthList: [],
      layerList: [],
      fpointOptions2: [],
      tableColor,
      titleColor,
      buttonColor,
      roomdate: [],
      roomdates: [],
      newdate: '',
      week: '',
      listQuery: {
        parm1: this.$store.state.user.fsiteNo,
        parm2: undefined,
        parm3: undefined,
        parm4: undefined,
        parm5: undefined,
        parm6: undefined,
      }
    };
  },
  created() {
    // 人员
    getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
      .then((response) => {
        this.getListSpeakerId = response.data.data.list;
      })
      .catch(() => {
        this.getListSpeakerId = [];
      });
    // 楼栋
    listPointByFsiteNo2(this.$store.state.user.fsiteNo)
      .then(response => {
        this.fpointOptions2 = response.data.data.list
      })
      .catch(() => {
        this.fpointOptions2 = []
      })
    this.current()
  },
  methods: {
    last() {
      this.listQuery.parm5 = this.getLastWeek(this.lastFlag)[0]
      this.listQuery.parm6 = this.getLastWeek(this.lastFlag)[1]
      this.monthList = []
      this.getAllDate(this.listQuery.parm5, this.listQuery.parm6, '-').forEach((item, index) => {
        let weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        this.monthList.push({ month: item, week: weekList[index] })
      })
      console.log('this.listQuery.parm5',this.listQuery.parm5);
      console.log('this.listQuery.parm5',this.listQuery.parm5);
      this.getList();
      this.lastFlag = this.lastFlag + 1
    },
    next() {
      this.listQuery.parm5 = this.getNextWeek(this.nextFlag)[0]
      this.listQuery.parm6 = this.getNextWeek(this.nextFlag)[1]
      this.monthList = []
      this.getAllDate(this.listQuery.parm5, this.listQuery.parm6, '-').forEach((item, index) => {
        let weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        this.monthList.push({ month: item, week: weekList[index] })
      })
      this.getList();
      this.nextFlag = this.nextFlag + 1
    },
    current() {
      let start = moment().weekday(1).format('YYYY-MM-DD') //本周一
      let end = moment().weekday(7).format('YYYY-MM-DD') //本周日
      this.listQuery.parm5 = start
      this.listQuery.parm6 = end
      this.monthList = []
      this.getAllDate(start, end, '-').forEach((item, index) => {
        let weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        this.monthList.push({ month: item, week: weekList[index] })
      })
      this.getList();
      this.lastFlag = 1
      this.nextFlag = 1
    },
    // 上周
    getLastWeek(i) {
      let weekOfDay = parseInt(moment().format('E'));//计算今天是这周第几天
      let last_monday = moment().subtract(weekOfDay + 7 * i - 1, 'days').format('YYYY-MM-DD');//周一日期
      let last_sunday = moment().subtract(weekOfDay + 7 * (i - 1), 'days').format('YYYY-MM-DD');//周日日期
      return [last_monday, last_sunday]
    },
    // 下周
    getNextWeek(i) {
      let weekOfDay = parseInt(moment().format('E'));//计算今天是这周第几天
      let next_monday = moment().add((7 - weekOfDay) + 7 * (i - 1) + 1, 'days').format('YYYY-MM-DD');//周一日期
      let next_sunday = moment().add((7 - weekOfDay) + 7 * i, 'days').format('YYYY-MM-DD');//周日日期
      return [next_monday, next_sunday]
    },
    // 1.处理日期格式
    getDate(datestr) {
      let temp = datestr.split('-')
      let date = new Date(temp[0], temp[1] - 1, temp[2])
      return date
    },
    // 2.获取时间段内的所有日期 Spacer:间隔符
    getAllDate(start, end, Spacer) {
      let dateList = []
      let startTime = this.getDate(start)
      let endTime = this.getDate(end)

      while ((endTime.getTime() - startTime.getTime()) >= 0) {
        let year = startTime.getFullYear()
        let month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1
        let day = startTime.getDate().toString().length == 1 ? '0' + startTime.getDate() : startTime.getDate()
        if (Spacer) {
          // 如果不需要间隔符则直接拼接返回
          if (Spacer === 'null') {
            dateList.push(year + month + day) // 如20220422,20220423
          } else {
            // 需要自定义间隔符
            dateList.push(year + Spacer + month + Spacer + day)
          }
        } else {
          dateList.push(year + '-' + month + '-' + day) // 2022-04-22,2022-04-23
        }
        startTime.setDate(startTime.getDate() + 1)
      }
      return dateList
    },
    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value
      if (value === 'add') {
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      } else {
        this.userDialogFsiteNo = this.listQuery.parm1
      }
      this.searchVisibleuse = true
    },

    // 人员弹出框返回值
    userDialogValue(value) {
      console.log('value', value);
      if (this.userFlag === 'add') {
      } else {
        this.listQuery.parm4 = value.user.id.toString()
      }
    },
    // 楼栋改变
    buildingChange(value) {
      this.listQuery.parm3 = ''
      this.layerList = []
      console.log('value', value);
      if (value) {
        this.getLayerList(value)
      }
    },
    // 获取楼层
    getLayerList(fpointNo) {
      listtsLayer({ limit: -1, fpointNo: fpointNo })
        .then(response => {
          this.layerList = response.data.data.list
        })
        .catch(() => {
          this.layerList = []
        })
    },
    // 回显
    formatFparentno: function (row, column) {
      if (this.getFparentno) {
        for (let i = 0; i < this.getFparentno.length; i++) {
          if (row.fparentno === this.getFparentno[i].value) {
            return this.getFparentno[i].label
          }
        }
      } else {
        return ''
      }
    },
    //更新
    updatelist() {
      this.getList();
    },
    // 日期 回显
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    getweekday(date) {
      var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date
      return week;
    },

    getList() {
      this.listLoading = true;
      meetingWeek(this.listQuery)
        .then((response) => {
          this.roomdates = response.data.data.list
          this.listLoading = false;
        })
        .catch(() => {
          this.roomdates = [];
        });
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 表单重置
    resetForm() {
      this.dataForm = {
      };
    },
    // 序号
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
